<template>
  <div class="more-payment-container">
    <div class="payment-box">
      <div class="tpay_type"
           data-type="user_balance" v-if="payPopData.isKuajing != 1">
        <span class="msettlement_tpay_span" v-if="payPopData.is_open_balance_pay==1 && tlyeShow">
          <van-checkbox
              v-if="!(payPopData.dz_ltns_free_item === 1)"
              v-model="yeChecked"
              @change="onChangeYe"
              icon-size="22px"
              checked-color="#F30C23"
            >使用余额（余额：<i class="mark">{{mSymbol.name}}</i><span class="balance_money">{{payPopData.balance}}</span>）
          </van-checkbox>
        </span>
        <!-- <input type="checkbox" checked id="money_yj" name="money_type" value="2" style="visibility: hidden;">
          <em class="em cur"></em> -->
        <!-- </span>
        </span>） -->
        <!-- <input type="hidden" value="{$must_pay_password}" class="must_pay_password" name="must_pay_password"> -->
        <!-- <span class="msettlement_tpay_span">
          <input type="checkbox" id="money_yj2" name="money_type" value="3" style="visibility: hidden;">
          <em class="em"></em>
        </span>
          使用订货商{$deposit_alias}（{$deposit_alias}：<i style="color:#e4393c">&yen;</i><span style="color:#e4393c" class="balance_money">{$dhs_deposit}</span>）
          <input type="hidden" value="{$must_pay_password}" class="must_pay_password" name="must_pay_password"> -->
      </div>
      <div class="tpay_type"
           data-type="dhs_deposit"
           v-if="payPopData.is_dhs_allow_deposit==1 && payPopData.is_check_dhs==1 && payPopData.dhs_deposit>0 && payPopData.is_advance_deposit_pay==1">
          <van-checkbox v-model="yckChecked"
                        @change="onChangeYck"
                        icon-size="18px"
                        checked-color="#F30C23">使用订货商{{payPopData.deposit_alias}}（{{payPopData.deposit_alias}}：<i class="mark">{{mSymbol.name}}</i><span class="balance_money">{{payPopData.dhs_deposit}}</span>）</van-checkbox>
        </span>
      </div>

      <h2 class="title">请选择支付方式</h2>
      <payment ref="payments"
               :itemIds="itemIds"
               :isTlfzPay="isTlfzPay"
               :isHdfkPay="isHdfkPay"
               :isPeerPay="isPeerPay"
               :isXxPay="isXxPay"
               :tlInfobz="tlInfobz"
               :istl="istl"
               :isHffzPay="isHffzPay"
               :isJhPay="isJhPay"
               @globalAlipay="globalAlipay"
               @paymentData='paymentData'
               @input="changePayment"
               v-model="paymentWay"></payment>
    </div>
    <div class="btn-box">
      <van-button class="btn confirm" text="确定" color="linear-gradient(to right,#FE1B49,#E90104)" block round @click="clickPay"></van-button>
      <van-button class="btn cancle" text="取消" block round plain color="#F20C20" @click="clickCancle">取消</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'
import { Checkbox } from 'vant'

Vue.use(Checkbox)
import { isWeixinCient } from '@/utils/validate'
import Payment from '@/components/Payment'
import { mapGetters } from 'vuex'

export default Vue.extend({
  name: 'index',
  components: {
    Payment
  },
  props: {
    /* dzData: {
      type: Object,
      default: () => {
        const Obj = {
          is_mq_cloud: false,
          is_mw_dz: false
        }
        return Obj
      }
    }, */
    itemIds: Array,
    isTlfzPay: {
      type: Boolean,
      default: false
    },
    isHffzPay: {
      type: Boolean,
      default: false
    },
    // 是否显示货到付款
    isHdfkPay: {
      type: Boolean,
      default: true
    },
    // 是否显示线下支付
    isXxPay: {
      type: Boolean,
      default: true
    },
    isJhPay: {
      type: Boolean,
      default: false
    },
    // 代付
    isPeerPay: {
      type: Boolean,
      default: false
    },
    payPopData: Object,
    istl: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      yeChecked: false, // 使用余额
      yckChecked: false, // 使用订货商预存款
      submitData: {
        payment: ''
      },
      paymentWay: '',
      defaultPay: null, // 默认付款方式
      margin: 0, // 账户余额-应付金额
      hantePay_defaults: null, // hantePay默认支付方式
      tlfz_deposit: 0, // 是否开启通联余额支付
      is_need_change_bind_phone: 0,
      tlyeShow: true, // 开启通联 余额不足 不限时余额支付
      tlInfobz: {
        is_tlfz: 0,
        is_tlfz_deposit: 0,
        is_ye: 0
      },
      isClick: true
    }
  },
  methods: {
    // 莱特妮丝判断是否是订货商
    paymentData(data) {
      this.tlfz_deposit = data.tlfz_deposit
      this.is_need_change_bind_phone = data.is_need_change_bind_phone
      let shop = this.$route.query.sid
      shop = small.globalData.shopId
      const ltsnDz = this.$_shop('$_ltsn_dz', shop)
      if (ltsnDz) {
        // 莱特妮丝 is_dhs  0 非订货商 1 订货商
        this.submitData.ltns_dhs = data.is_dhs
      }
      if (this.tlfz_deposit) {
        if (this.payPopData.payment - 0 > this.payPopData.balance - 0) {
          // console.log('余额不足')
          this.yeChecked = false
          this.tlyeShow = false
        } else {
          this.yeChecked = true
          this.tlyeShow = true
        }
        if (this.payPopData.tlfz_point_exchange) {
          this.yeChecked = false
          this.tlyeShow = false
        }
      }
      // 汇付分账
      if (data.adapay_wx || data.adapay_ali) {
        if (this.payPopData.payment - 0 > this.payPopData.balance - 0) {
          // console.log('余额不足')
          this.yeChecked = false
          this.tlyeShow = false
        } else {
          this.yeChecked = true
          this.tlyeShow = true
        }
      }
    },
    init() {
      if (this.payPopData.is_open_balance_pay == 1 && this.payPopData.isKuajing != 1) {
        this.yeChecked = true
      }
      this.defaultPay = this.payPopData.default_pay_type
      // var i = $('#default_pay').val()
      this.submitData.payment = this.payPopData.payment // 应付金额
      this.submitData.order_id = this.payPopData.order_id // 应付金额
      // var total_price = parseFloat($(this).data('payment'))
      const balance = this.payPopData.balance // 余额
      // var balance = parseFloat($('.msettlement_tpay_span').siblings('span').text())
      this.margin = parseFloat(balance) - parseFloat(this.submitData.payment)
      // var margin = parseFloat(balance) - parseFloat(total_price)
      this.hantePay_defaults = this.payPopData.default_pay || 0

      // 账户余额小于应付金额时
      if (this.margin < 0) {
        // $('.addurl_con .cod' + defaultPay).addClass('on').find('input[name="type"]').attr('checked', true)
        if (this.defaultPay == 2 || this.defaultPay == 12) {
          this.paymentWay = 'wxpay'
        } else if (this.defaultPay == 1) {
          this.paymentWay = 'alipay'
        } else if (this.defaultPay == 3) {
          this.paymentWay = 'Hdfkpay'
        } else if (this.defaultPay == 4) {
          this.paymentWay = 'jdpay'
        } else if (this.defaultPay == 5) {
          this.paymentWay = 'PayPalpay'
        } else if (this.defaultPay == 6) {
          this.paymentWay = 'BeiBaopay'
        } else if (this.defaultPay == 7) {
          this.paymentWay = 'peerpay'
        } else if (this.defaultPay == 8) {
          this.paymentWay = 'ylpay'
        } else if (this.defaultPay == 9) {
          this.paymentWay = 'kqpay'
        } else if (this.defaultPay == 10) {
          this.paymentWay = 'xxpay'
        } else if (this.defaultPay == 11) {
          this.paymentWay = 'yeepay'
        } else if (this.defaultPay == 13) {
          this.paymentWay = 'kltpay'
        } else if (this.defaultPay == 14) {
          this.paymentWay = 'newyeepay'
        } else if (this.defaultPay == 15) {
          this.paymentWay = 'globalAlipay'
        } else if (this.defaultPay == 16) {
          if (this.hantePay_defaults == 1) {
            this.paymentWay = 'htwxpay'
          } else if (this.hantePay_defaults == 2) {
            this.paymentWay = 'htAlipay'
          }
        } else if (this.defaultPay == 17) {
          this.paymentWay = 'cloudPay'
        } else if (this.defaultPay == 19) {
          this.paymentWay = 'tlwxpay'
        } else if (this.defaultPay == 26) {
          this.paymentWay = 'tlfzWxpay'
        } else if (this.defaultPay == 27) {
           this.paymentWay = 'HipoWxPay'
        }  else if (this.defaultPay == '24') {
          this.paymentWay = 'ytDzWxPay'
        } else if (this.defaultPay == '25') {
          this.paymentWay = 'ytDzZfbPay'
        } else if (this.defaultPay == 29) { // 汇聚支付 微信
          this.payMentWay = 'JoinWeChatPay'
        } else if (this.defaultPay == 48) {
          this.payMentWay = 'jhWeChatPay'
        }
      }
      // 只有余额小于实付金额的时候支持余额和其它支付方式并存，否则只能选择一种支付方式
      /*  if (this.margin >= 0) {

        // 选择支付方式
        $('.msettlement_tpay label').click(function() {
          $(this)
            .addClass('on')
            .siblings('label')
            .removeClass('on')
            .find('input[name=type]').attr('checked', false)
          $(this).siblings('h2').find("input[name='money_type']").attr('checked', false)
          $(this).siblings('h2').find('.msettlement_tpay_span').find('em').removeClass('cur')
          $(this).find('input[name=type]').attr('checked', true)
          // 定制  hantePay 优化  start
          $(this).find('input[name=hantepay]').attr('checked', true)
          $(this).siblings('.cod16').find('input[name=hantepay]').attr('checked', false)
          // 定制  hantePay 优化  end
        })
        // 选择余额
        $('.msettlement_tpay_span .em').off('click').on('click', function(event) {
          var me = $(this)
          var oParent = me.parents('.tpay_type')
          var balance_type = oParent.data('type')
          if (me.hasClass('cur')) {
            me.removeClass('cur').siblings('input').attr('checked', false)
            $('.payment_type').show()
          } else {
            me.addClass('cur').siblings('input').attr('checked', true)
            if (balance_type == 'dhs_deposit') {
              $('.payment_type').hide()
            } else {
              $('.payment_type').show()
            }
            me.closest('h2').siblings('.payment_type').find('label').removeClass('on')
              .find('input[name=type]').attr('checked', false).find('b').hide()

            oParent.siblings('.tpay_type').find('em').removeClass('cur').siblings('input').attr('checked', false)
          }
        })
        $(document).on('click', '.paylabel', function() {
          if ($(this).find('input').is(':checked')) {
            $('.msettlement_tpay_span .em').removeClass('cur').siblings('input').attr('checked', false)
          }
        })
      }
      // 余额小于实付金额的时候支持余额和其它支付方式并存
      else if (balance >= 0 && balance < total_price) {
        // 其他付款方式
        $('.msettlement_tpay label').click(function() {
          $(this)
            .addClass('on')
            .siblings('label')
            .removeClass('on')
            .find('input[name=type]').attr('checked', false)
          // $(this).siblings("h2").find("input[name='money_type']").attr("checked",false);
          // $(this).siblings("h2").find(".msettlement_tpay_span").find("em").removeClass("cur");
          $(this).find('input[name=type]').attr('checked', true)
          // 定制  hantePay 优化  start
          $(this).find('input[name=hantepay]').attr('checked', true)
          $(this).siblings('.cod16').find('input[name=hantepay]').attr('checked', false)
          // 定制  hantePay 优化  end
        })
        // 余额和订货商预存款
        $('.msettlement_tpay_span .em').off('click').on('click', function(event) {

          var me = $(this)
          var oParent = me.parents('.tpay_type')
          var balance_type = oParent.data('type')

          if (me.hasClass('cur')) {
            me.removeClass('cur').siblings('input').attr('checked', false)
            $('.payment_type').show()
          } else {
            me.addClass('cur').siblings('input').attr('checked', true)
            if (balance_type == 'dhs_deposit') {
              $('.payment_type').hide()
            } else {
              $('.payment_type').show()
            }
            // me.closest("h2").siblings("label").removeClass("on")
            //     .find("input[name=type]").attr("checked",false).find("b").hide();

            oParent.siblings('.tpay_type').find('em').removeClass('cur').siblings('input').attr('checked', false)
          }
        })
      }*/
    },
    // 余额勾选改变时
    onChangeYe() {
      if (this.yeChecked) {
        this.morePaytype(1)
      }
    },
    // 预存款勾选改变时,订货商预存款不能和其他支付方式一起使用
    onChangeYck() {
      if (this.yckChecked) {
        this.morePaytype(2)
      }
    },
    // 选择了其他支付方式时
    changePayment(val) {
      if (val) {
        this.morePaytype(3)
      }
    },
    // 判断余额或订货商预存款和应付金额的关系
    // type为1：选择了余额，2：选择了订货商预存款，3：选择了其他支付方式
    morePaytype(type) {
      //  如果账户余额-应付金额大于等于0
      if (this.margin >= 0) {
        if (type == 1) {
          this.yckChecked = false
          this.paymentWay = ''
          this.submitData.type = ''
        } else if (type == 2) {
          this.yeChecked = false
          this.paymentWay = ''
          this.submitData.type = ''
        } else if (type == 3) {
          this.yeChecked = false
          this.yckChecked = false
          // console.log(this.yeChecked)
        }
      } else {
        // 余额小于实付金额的时候支持余额和其它支付方式并存
        if (type == 1) {
          this.yckChecked = false
          // this.paymentWay = ''
          // this.submitData.type = ''
        } else if (type == 2) {
          this.yeChecked = false
          this.paymentWay = ''
          this.submitData.type = ''
        } else if (type == 3) {
          // this.yeChecked = false
          this.yckChecked = false
        }
      }
    },
    /**
       * 选中国际支付宝抛出的值
       */
    globalAlipay(val) {
      this.global_alipay_currency = val
    },
    // 点击确认付款
    clickPay() {
      // console.log('点击确认付款')
      if (this.isClick) {
        this.isClick = false
        this.endPay()
      }
      setTimeout(() => {
        this.isClick = true
      }, 1000)
    },
    endPay() {
      // // console.log(999)
      const submitData = Object.assign({}, this.submitData, true)
      submitData.yeChecked = this.yeChecked
      submitData.tlfz_deposit = this.tlfz_deposit
      submitData.is_need_change_bind_phone = this.is_need_change_bind_phone
      if (this.yeChecked) {
        submitData.moneyType = 2 // 余额
      } else if (this.yckChecked) {
        submitData.moneyType = 3 // 预存款
      } else {
        submitData.moneyType = ''
      }

      submitData.global_alipay_currency = ''
      submitData.hantepay = ''
      // Application\Mobile\View\Order\lists.html
      // 微信2、12，支付宝1，国际支付宝15，通联支付19，汉特16，货到付款3，京东支付4，PayPal5，贝宝支付6，找人代付7，银联支付8，快钱支付9，线下付款10，易宝支付11，开联通支付13，新易宝支付14，云闪付17
      if (this.paymentWay == 'wxpay') {
        if (isWeixinCient()) { // 微信环境
          submitData.type = 2
        } else { // 非微信环境
          submitData.type = 12
        }
      } else if (this.paymentWay == 'alipay') {
        submitData.type = 1
      } else if (this.paymentWay == 'Hdfkpay') {
        submitData.type = 3
      } else if (this.paymentWay == 'jdpay') {
        submitData.type = 4
      } else if (this.paymentWay == 'PayPalpay') {
        submitData.type = 5
      } else if (this.paymentWay == 'BeiBaopay') {
        submitData.type = 6
      } else if (this.paymentWay == 'peerpay') {
        submitData.type = 7
      } else if (this.paymentWay == 'ylpay') {
        submitData.type = 8
      } else if (this.paymentWay == 'kqpay') {
        submitData.type = 9
      } else if (this.paymentWay == 'xxpay') {
        submitData.type = 10
      } else if (this.paymentWay == 'yeepay') {
        submitData.type = 11
      } else if (this.paymentWay == 'kltpay') {
        submitData.type = 13
      } else if (this.paymentWay == 'newyeepay') {
        submitData.type = 14
      } else if (this.paymentWay == 'globalAlipay') { // 国际支付宝
        submitData.type = 15
        submitData.global_alipay_currency = this.global_alipay_currency
      } else if (this.paymentWay == 'htwxpay') { // 定制 hante
        submitData.type = 16
        submitData.hantepay = 1
      } else if (this.paymentWay == 'htAlipay') { // 定制 hante
        submitData.type = 16
        submitData.hantepay = 2
      } else if (this.paymentWay == 'cloudPay') { // 定制云闪付
        submitData.type = 17
      } else if (this.paymentWay == 'tlwxpay') { // 通联支付
        submitData.type = 19
        submitData.payment_type = 1
      } else if (this.paymentWay == 'tlAlipay') { // 通联支付
        submitData.type = 19
        submitData.payment_type = 2
      } else if (this.paymentWay == 'goallpay') { // 通联支付
        submitData.type = 20
      } else if (this.paymentWay == 'Alipay') {
        submitData.type = 21
      } else if (this.paymentWay == 'UnionPay') {
        submitData.type = 22
      } else if (this.paymentWay == 'WeChatPay') {
        submitData.type = 23
      } else if (this.paymentWay == 'tlfzWxpay') {
        submitData.type = 26
        submitData.tlfz_pay_type = 1
      } else if (this.paymentWay == 'HipoWxPay') {
        submitData.type = 27
      } else if (this.paymentWay == 'JoinWeChatPay') { // 汇聚支付 微信
        submitData.type = 29
      }else if (this.paymentWay == 'hffzWxpay') { // 汇聚支付 微信
        submitData.type = 34
        submitData.adapay_pay_type = 2
      } else if (this.paymentWay == 'jhWeChatPay') {
        submitData.type = 48
      }
      this.$emit('payCallback', submitData)
    },
    // 点击取消
    clickCancle() {
      this.$emit('closePayPop')
    }
  },
  created() {
    this.init()
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  },
  watch: {
    payPopData: {
      deep: true,
      immediate: true,
      handler(nv) {
        // console.log(nv, 'nv')
        if (nv.dz_ltns_free_item === 1) {
          // dz_ltns_free_item 隐藏余额支付 取消 余额选中
          this.yeChecked = false
        }
      }
    }
  }
})
</script>
<style lang="scss">
.miniprogram-root{
  .payment-wrap-item{
    .van-radio__icon{
      height: 40rpx;
      line-height: 40rpx;
    }
    .van-radio__icon .van-icon,.van-checkbox__icon .van-icon{
      width: 40rpx;
      height: 40rpx;
      font-size: 40rpx;
    }
  }
  .van-button{
    height: 88rpx;
  }
  .van-checkbox__label{
    line-height: 40rpx;
  }
}
.more-payment-container {
  height: 100%;
  padding:20px;
  font-size: 30px;
  line-height: 1.5;
  .payment-box {
    padding: 30px 30px 4px;
    border-radius:20px;
    background: #fff;
  }
  .payment-wrap {
    .van-radio {
      &:last-child {
        border-bottom: 0;
      }
    }
  }
  .tpay_type {
    margin-bottom: 30px;
    .mark,
    .balance_money {
      color: #F21228;
    }
  }
  .title {
    font-size: 30px;
    padding: 16px 0 30px;
  }
  .btn-box {
    padding:50px 0;
    text-align: center;
    .btn {
      width:650px;
      margin: 20px auto 0;
      font-size: 32px;
      color: #fff;
    }
  }
}
</style>
